<template>
	<view>

		<view v-if="markers.length > 0">



			<view class="item" v-for="(item, index) in markers" :key="index" @click="itemClick(item)">


				<view class="text-line" style="margin-top: 30upx;">
					<text class="text-name"
						style="font-weight: bold;font-size: 32upx;color: #333333;">{{item.name}}</text>
				</view>


				<view class="text-line">
					<text class="text-name"
						style="font-size: 28upx;color: #a7a7a7;margin-right: 20upx;white-space: normal;">距离{{item.distance+ ' | ' +item.address}}</text>
				</view>



				<view class="text-line" v-if="item.telephone">
					<text class="text-name">电话:</text>
					<text class="text-value" style="color: #FFC000;"
						@click.stop="makephone(item.telephone)">{{item.telephone}}</text>
				</view>

				<view class="title-wrap">

					<view class="title-warn">

					</view>

					<view class="btn-detail navi-wrap" @click.stop="navi(item)">
						<image class="navi-img" src="../../../../static/home/navigation_icon.png" mode="widthFix">
						</image>
						到这去
					</view>
				</view>

			</view>

			<u-loadmore :status="loadingStatus" @loadmore="clickloadmore"></u-loadmore>
		</view>

		<no-data v-else></no-data>

	</view>
</template>

<script>
	var bmap = require('../../../../util/bmap-wx.js');

	import {
		baidukey
	} from '../../../../common/config.js';


	export default {
		data() {
			return {
				pageNo: 0,
				loadingStatus: 'loading',
				// wxMarkerData: [],
				BMap: {},
				myLat: '',
				myLng: '',
				markers: [
					// {
					// 	name: "依威能源充电站(盐东小区)",
					// 	location: {
					// 		lat: 34.343032332784,
					// 		lng: 108.93632657042
					// 	},
					// 	telephone: '1232113',
					// 	address: "陕西省西安市未央区张家堡街道文景路112号",
					// 	province: "陕西省",
					// 	city: "西安市",
					// 	area: "未央区",
					// 	detail: 1,
					// 	distance: '123km',
					// 	uid: "55ae92b85b7b1f8e9d82ea52"
					// },
					// {
					// 	name: "陕西充电站(赛高悦府小区)",
					// 	location: {
					// 		lat: 34.338622731652,
					// 		lng: 108.94409719365
					// 	},
					// 	address: "西安市未央区张家堡街道凤城七路万科·赛高悦",
					// 	province: "陕西省",
					// 	city: "西安市",
					// 	area: "未央区",
					// 	detail: 1,
					// 	distance: '123km',
					// 	uid: "b83bf67728975f2cfea778f3"
					// },
				]
			}
		},

		onLoad() {
			// 新建百度地图对象
			this.BMap = new bmap.BMapWX({
				ak: baidukey
			});
			// uni.getSetting({
			// 	success: (res) => {
			// 		console.log('第一个成功');
			// 		if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
			// 				'scope.userLocation'] != true) { //非初始化进入该页面,且未授权
			// 			console.log('未授权，走授权');
			// 			uni.openSetting({
			// 				success: function(data) {
			// 					if (data.authSetting["scope.userLocation"] == true) {
			// 						uni.showToast({
			// 							title: '授权成功',
			// 							icon: 'success',
			// 							duration: 2000
			// 						})
			// 						//再次授权，调用getLocationt的API
			// 						console.log('授权成功了开始走init方法');
			// 						// this.getInit()
			// 						this.initMap();
			// 					} else {
			// 						uni.showToast({
			// 							title: '授权失败',
			// 							icon: 'none',
			// 							duration: 2000
			// 						})
			// 					}
			// 				}
			// 			})
			// 		} else { //初始化进入
			// 			console.log('本来就有授权开始走init方法');
			// 			this.initMap();
			// 			this.getsearchdata();
			// 		}
			// 	},

			// 	fail: (res) => {
			// 		console.log('失败', res);
			// 	}
			// })

			this.initMap();

		},

		methods: {

			initMap() {
				wx.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.myLat = res.latitude;
						this.myLng = res.longitude;
						this.getsearchdata();
					},
					fail: (e) => {
					}
				})

				// this.getsearchdata();
			},

			// 读取数据
			getsearchdata() {
				uni.showLoading({
					title: '数据加载中...',
				})
				let that = this;
				var fail = function(data) {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '数据加载失败,请重试 ',
					})
					that.loadingStatus = 'loadmore';
				};
				var success = function(data) {
					uni.hideLoading();
					// wxMarkerData = data.wxMarkerData;
					let wxMarkerData = data.originalData.results;

					for (var i in wxMarkerData) {
						const lat1 = that.myLat;
						const lng1 = that.myLng;
						// const lat2 = wxMarkerData[i].latitude location.lat;
						// const lng2 = wxMarkerData[i].longitude .lng;
						const lat2 = wxMarkerData[i].location.lat;
						const lng2 = wxMarkerData[i].location.lng;
						// 调用 return的距离单位为km
						var radLat1 = lat1 * Math.PI / 180.0;
						var radLat2 = lat2 * Math.PI / 180.0;
						var a = radLat1 - radLat2;
						var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
						var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
						s = s * 6378.137; // EARTH_RADIUS;
						s = Math.round(s * 10000) / 10000;
						wxMarkerData[i].distance1 = s;
						if (s >= 1) {
							wxMarkerData[i].distance = s.toFixed(2) + 'km'
						} else {
							wxMarkerData[i].distance = s.toFixed(2) * 1000 + 'm'
						}
					}
					wxMarkerData.sort(function(a, b) {
						return a.distance1 - b.distance1;
					});
					if (that.pageNo == 0) {
						that.markers = [];
						that.pageNo++;
						// uni.stopPullDownRefresh();

						that.loadingStatus = 'loadmore';
					} else {
						if (!uni.$u.test.isEmpty(wxMarkerData)) {
							that.pageNo++;

							that.loadingStatus = 'loadmore';
						} else {

							that.loadingStatus = 'nomore';
						}
					}

					if (!uni.$u.test.isEmpty(wxMarkerData)) {
						that.markers = that.markers.concat(wxMarkerData);
					}
				}
				// 发起POI检索请求 
				this.BMap.search({
					"query": '充电桩',
					"location": `${this.myLat},${this.myLng}`,
					page_size: 10,
					page_num: this.pageNo,
					fail: fail,
					success: success,
				});
			},


			makephone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},


			itemClick(item) {
				if (item.uid) {
					uni.navigateTo({
						url:'./chargedetail?distance=' + item.distance + "&uid=" + item.uid
					})
				}
			},

			clickloadmore() {
				this.getsearchdata();
				this.showloading = true;
				this.loadingStatus = 'loading';
			},

			navi(item) {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
						uni.openLocation({ //​使用微信内置地图查看位置。
							latitude: item.location.lat, //要去的纬度-地址
							longitude: item.location.lng, //要去的经度-地址
							name: item.name,
							address: item.address
						})
				// 	}
				// })
			},

		},
		onPullDownRefresh() {
			this.pageNo = 0;
			this.getsearchdata();
		},

		onReachBottom() {
			this.getsearchdata();
			this.showloading = true;
			this.loadingStatus = 'loading';
		}

	}
</script>

<style lang="scss" scoped>
	.title-wrap {
		display: inline-flex;
		justify-content: space-between;
	}

	.title {
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: $black33;
	}

	.title-warn {
		color: #E93131;
		background-color: #FFFFFF;
		white-space: nowrap;
		text-align: center;
		font-size: 26upx;
		line-height: 60upx;
		margin: 10upx 0upx;
		align-self: flex-end;
	}

	.navi-wrap {
		@include flex;
		align-items: center;
		justify-content: center;

		.navi-img {
			width: 30upx;
			height: 30upx;
			margin-right: 10upx;
		}
	}
</style>
